<template>
	<view>
		<view class="nursery-item" @click="courseClick">
			<view class="top-v">
				<view class="type">{{formatType(course.category)}}</view>
				<view class="name">{{course.courseName}}</view>
			</view>
			<view class="bottom-v">
				<u-icon name="clock"></u-icon>
				<view class="time">
					{{formatTime(course.beginTime, 'hh:MM')}}-{{formatTime(course.endTime, 'hh:MM')}}
				</view>
				<view class="remark">
					{{course.remark || ''}}
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" height="80%">
			<view class="popup-content">
				<u-section
					v-if="areaCourse"
					:title="areaCourse.name"
					:line-color="appTheme.checkColor"
					font-size="36">
					<view slot="right"></view>
				</u-section>
				
				<view class="content">
					<joMarkdown v-if="areaCourse" :nodes="formatMarkdown(areaCourse.content)"></joMarkdown>
				</view>
				
				<view class="tool">
					<u-grid :col="3" :border="false">
						<u-grid-item v-for="(toolItem, subIndex) in toolList" :custom-style="customStyle">
							<view class="tool-item" @click="toolClick(toolItem)">
								<u-icon v-if="toolItem.type === 'radio'" name="volume" size="60"></u-icon>
								<u-image v-else class="cover" height="100rpx" width="100rpx" :src="toolItem.url"></u-image>
								<view class="tool-title">{{toolItem.name}}</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</u-popup>
		
		<u-popup v-model="audioShow" mode="bottom" @close="audioClose">
			<view style="padding: 30rpx;">
				<wxy-audio 
					:src="audioSrc"
					:play.sync="audioPlay"
				/>
			</view>
		</u-popup>
		
		<u-popup v-model="videoShow" mode="bottom" @close="videoClose">
			<view style="padding: 30rpx;display: flex;justify-content: center;align-items: center;">
				<video
					class="video"
					id="myVideo"
					
					:src="videoSrc"
					autoplay="true"
				/>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import appMixin from '@/mixins/app.js'
	import { formatDateByTimestamp } from '@/utils/utils.js'
	import joMarkdown from '../../teach/components/jo-markdown/decode.vue';
	import markdownFunc from '../../teach/components/jo-markdown/index.js';
	import { getAreaBulidCourseById } from '@/api/course'
	export default {
		name: "NurseryItem",
		mixins: [appMixin],
		components: {
			joMarkdown
		},
		props: {
			course: {
				type: Object,
				default () {
					return {}
				}
			},
		},
		data() {
			return {
				customStyle: {
					padding: '10rpx 0'
				},
				
				show: false,
				areaCourse: null,
				toolList: [],
				
				audioShow: false,
				audioPlay: false,
				audioSrc: '',
				
				videoShow: false,
				videoSrc: ''
			}
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			formatTime(timestamp, fmt) {
				return formatDateByTimestamp(timestamp, fmt)
			},
			
			formatType(category) {
				if (category === 0) {
					return '活动课'
				} else if (category === 3) {
					return '自建课'
				} else {
					return '主题课'
				}
			},
			
			courseClick() {
				console.log('courseClick')
				if (this.course.category === 1) {
					this.$u.route({
						url: '/pages_teach/teach/teach-detail-page',
						params: {
							id: this.course.resObj
						}
					})
				} else if (this.course.category === 3) {
					this.getAreaBulidCourse(this.course.resObj)
				}
			},
			
			getAreaBulidCourse(courseId) {
				getAreaBulidCourseById({courseId}).then(res => {
					console.log(res)
					this.areaCourse = res.data;
					this.toolList = JSON.parse(res.data.attachments)
					this.show = true
				})
			},
			
			formatMarkdown(markdown) {
				return markdownFunc(markdown, 'markdown');
			},
			
			toolClick(item) {
				if (this.isFile(item.name)) {
					this.openDocument(item.imgUrl)
				} else if (item.name.indexOf('mp3') !== -1) {
					this.audioSrc = item.url;
					this.audioShow = true;
					// this.play = true
				} else if (item.name.indexOf('mp4') !== -1) {
					this.videoSrc = item.url;
					this.videoShow = true
				} else if (item.name.indexOf('.png') !== -1 || item.name.indexOf('.jpg') !== -1) {
					const itemList = [ item.url ]
					uni.previewImage({
						urls: itemList,
					});
				}
			},
			
			openDocument(url) {
				uni.showLoading({title: '正在加载文件'})
				uni.downloadFile({//下载对应文件
				  url: url,
				  success: function (res) {
					console.log(res);
					var filePath = res.tempFilePath;//文件路径
					uni.openDocument({
					  filePath: filePath,//装载对应文件的路径
					  fileType: 'pdf',//指定打开的文件类型
					  success: function (res) {
						console.log("打开成功");
					  },
					  fail: function (res) {
						console.log(res);
					  }
					})
			
				  },
				  fail: function (res) {
					console.log(res);
					this.$u.toast('加载失败')
				  },
				  complete() {
				  	uni.hideLoading()
				  }
				})
			},
			
			audioClose() {
				this.audioPlay = false
			},
			
			videoClose() {
				this.videoContext.stop()
			},
			
			isFile(fileName) {
				// 后缀获取
				var suffix = ''
				let result = false
				try {
				  var flieArr = fileName.split('.')
				  suffix = flieArr[flieArr.length - 1]
				} catch (err) {
				  suffix = ''
				}
					
				var wordlist = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx']
				result = wordlist.some(function (item) {
				  return item == suffix
				})
				return result
			}
		}
	}
</script>

<style lang="scss">
	.nursery-item{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		
		display: flex;
		flex-direction: column;
		
		.top-v{
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.type{
				width: 100rpx;
				height: 34rpx;
				background: #FFFFFF;
				border: 1rpx solid #DA473A;
				border-radius: 17rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #DA473A;
				
			}
			.name{
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				line-height: 38rpx;
				
				margin-left: 20rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
		
		.bottom-v{
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 26rpx;
			
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 10rpx;
			
			.time{
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.popup-content{
		padding: 30rpx;
		
		.content{
			margin-top: 30rpx;
		}
		
		.tool{
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			
			.tool-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.cover{
					height: 100rpx;
					width: 100rpx;
				}
				
				.tool-title{
					margin-top: 10rpx;
					font-size: 20rpx;
					height: 60rpx;
					color: $app-font-desc-color;
				}
			}
		}
	}
	
	
</style>
